<!-- <template>
  <component :is="tabComponent"></component>

  切换时仍然保留
  <keep-alive>
    切换时卸载
    <component :is="tabComponent"></component>
  </keep-alive>

  <button @click="changeTab">切换tab</button>
</template>

<script>
import { defineAsyncComponent } from 'vue';
import TabA from './TabA.vue';
const TabB = defineAsyncComponent(() => import('./TabB.vue'));
export default {
  data() {
    return {
      tabComponent: 'TabA'
    }
  },
  comments: {
    TabA,
    TabB
  },
  methods: {
    changeTab() {

      this.tabComponent = this.tabComponent == 'TabA' ? 'TabB' : 'TabA';
    }
  },
}
</script>


</style> -->


<!-- provide和inject 只能爷爷传给孙子 -->
<template>
  <Parent />
</template>

<script>
import Parent from './Parent.vue';
export default {
  // provide: {
  //     message: "hello"
  // },

  // 数据message来源于data
  data() {
    return {
      message: "hello"
    }
  },
  provide() {
    return {
      message: this.message
    }
  },

  comments: {
    Parent
  }
}
</script>


</style>